<template>
  <div class="Canvas_page">
    <div class="title">
      <div class="left"
           @click="$router.go(-1)">←</div>
      <div class="center">canvas页面</div>
      <div class="right"></div>
    </div>
    <div class="canvas_box">
      <canvas id="canvas"
              width="200"
              height="200">
      </canvas>
      <!-- <canvas id="canvas"
              style="width:100vw;height:50vw">
        画布默认的width300,height:150,单位px，比例2/1 。
        如果设置宽高在style里面处理，画笔画出来与预期效果不一致，例如画个圆却是椭圆
        Context.arc(100, 100, 50, 0, Math.PI * 2, true);
      </canvas> -->
    </div>
  </div>
</template>
<script>
export default {
  name: "Canvas_page",
  mixins: [],
  components: {},
  data() {
    return {
      canvasDom: null,
      canvasContext: null
    };
  },
  props: {},
  computed: {},
  watch: {},
  methods: {
    //   rgb(255, 0, 0),红
    //   rgb(255, 255, 0),黄
    //   rgb(0, 255, 0),绿
    //   rgb(0, 255, 255),青
    //   rgb(0, 0, 255),蓝
    //   rgb(255, 0, 255),紫
    render(params, DEG) {
      let canvasContext = this.canvasContext;
      class renderAperture {
        constructor(info) {
          this.x = info.x;
          this.y = info.y;
          this.r = info.r;
          this.borderStart = info.borderStart;
          this.borderEnd = info.borderEnd;
          this.direction = info.direction;
          this.lineWidth = info.lineWidth;
          this.strokeStyle = info.strokeStyle;
        }
        handerRenderAperture() {
          canvasContext.beginPath();
          canvasContext.arc(
            this.x,
            this.y,
            this.r,
            this.borderStart + DEG,
            this.borderEnd + DEG,
            this.direction
          );
          canvasContext.lineWidth = this.lineWidth;
          canvasContext.strokeStyle = this.strokeStyle;
          canvasContext.stroke();
        }
      }
      new renderAperture(params).handerRenderAperture();
    },
    loopHanderRenderAperture(rgb1, rgb2, num) {
      let rgb = {
        r: 255,
        g: 0,
        b: 0
      };
      let base_deg = Math.PI * 2 * (1 / 6);
      let rangeNum = 0;
      let single = base_deg / 255;
      let borderStart = 0;
      let borderEnd = 0;
      for (let i = 0; i < 255; i++) {
        borderStart = base_deg * rangeNum + single * i;
        borderEnd = base_deg * rangeNum + single * (i + 1);
        rgb.g = i + 1;
        let info = {
          x: 100,
          y: 100,
          r: 60,
          borderStart,
          borderEnd,
          direction: false,
          lineWidth: 50,
          strokeStyle: `${this.handerRgb(rgb1, rgb2, i)}`
        };
        // console.log(info.strokeStyle, "<<<--------------- strokeStyle ");
        this.render(info, base_deg * num);
      }
    },
    handerRgb(rgb1, rgb2, index) {
      let r = 0,
        g = 0,
        b = 0;
      //   rgb(255, 0, 0),红
      //   rgb(255, 255, 0),黄
      if (
        rgb1.r - rgb2.r === 0 &&
        rgb1.g - rgb2.g < 0 &&
        rgb1.b - rgb2.b === 0 &&
        rgb1.r === 255 &&
        rgb1.b === 0
      ) {
        r = rgb1.r;
        g = index;
        b = rgb1.b;
      }
      //   rgb(255, 255, 0),黄
      //   rgb(0, 255, 0),绿
      if (
        rgb1.r - rgb2.r > 0 &&
        rgb1.g - rgb2.g === 0 &&
        rgb1.b - rgb2.b === 0 &&
        rgb1.g === 255 &&
        rgb1.b === 0
      ) {
        r = 255 - index;
        g = rgb1.g;
        b = rgb1.b;
      }
      //   rgb(0, 255, 0),绿
      //   rgb(0, 255, 255),青
      if (
        rgb1.r - rgb2.r === 0 &&
        rgb1.g - rgb2.g === 0 &&
        rgb1.b - rgb2.b < 0 &&
        rgb1.r === 0 &&
        rgb1.g === 255
      ) {
        r = rgb1.r;
        g = rgb1.g;
        b = index;
      }
      //   rgb(0, 255, 255),青
      //   rgb(0, 0, 255),蓝
      if (
        rgb1.r - rgb2.r === 0 &&
        rgb1.g - rgb2.g > 0 &&
        rgb1.b - rgb2.b === 0 &&
        rgb1.r === 0 &&
        rgb1.b === 255
      ) {
        r = rgb1.r;
        g = 255 - index;
        b = rgb1.b;
      }
      //   rgb(0, 0, 255),蓝
      //   rgb(255, 0, 255),紫
      if (
        rgb1.r - rgb2.r < 0 &&
        rgb1.g - rgb2.g === 0 &&
        rgb1.b - rgb2.b === 0 &&
        rgb1.g === 0 &&
        rgb1.b === 255
      ) {
        r = index;
        g = rgb1.g;
        b = rgb1.b;
      }
      //   rgb(255, 0, 255),紫
      //   rgb(255, 0, 0),红
      if (
        rgb1.r - rgb2.r === 0 &&
        rgb1.g - rgb2.g === 0 &&
        rgb1.b - rgb2.b > 0 &&
        rgb1.r === 255 &&
        rgb1.g === 0
      ) {
        r = rgb1.r;
        g = rgb1.g;
        b = 255 - index;
      }
      return `rgb(${r},${g},${b})`;
    },
    init() {
      this.canvasDom = document.getElementById("canvas");
      this.canvasContext = this.canvasDom.getContext("2d");
      this.loopHanderRenderAperture(
        { r: 255, g: 0, b: 0 },
        { r: 255, g: 255, b: 0 },
        0
      );
      this.loopHanderRenderAperture(
        { r: 255, g: 255, b: 0 },
        { r: 0, g: 255, b: 0 },
        1
      );
      this.loopHanderRenderAperture(
        { r: 0, g: 255, b: 0 },
        { r: 0, g: 255, b: 255 },
        2
      );
      this.loopHanderRenderAperture(
        { r: 0, g: 255, b: 255 },
        { r: 0, g: 0, b: 255 },
        3
      );
      this.loopHanderRenderAperture(
        { r: 0, g: 0, b: 255 },
        { r: 255, g: 0, b: 255 },
        4
      );
      this.loopHanderRenderAperture(
        { r: 255, g: 0, b: 255 },
        { r: 255, g: 0, b: 0 },
        5
      );

      this.canvasContext.clearRect(50, 50, 2, 2);
      // this.canvasContext.beginPath();
      // this.canvasContext.arc(100, 100, 60, Math.PI * 0, Math.PI * 0.5, false);
      // this.canvasContext.strokeStyle = "red";
      // this.canvasContext.lineWidth = 40;
      // this.canvasContext.stroke();
      // this.canvasContext.closePath();

      // this.canvasContext.beginPath();
      // this.canvasContext.arc(100, 100, 60, Math.PI * 0.5, Math.PI * 1, false);
      // this.canvasContext.strokeStyle = "yellow";
      // this.canvasContext.lineWidth = 40;
      // this.canvasContext.stroke();
      // this.canvasContext.closePath();

      // this.canvasContext.beginPath();
      // this.canvasContext.arc(100, 100, 60, Math.PI * 1, Math.PI * 1.5, false);
      // this.canvasContext.strokeStyle = "blue";
      // this.canvasContext.lineWidth = 40;
      // this.canvasContext.stroke();
      // this.canvasContext.closePath();

      // this.canvasContext.beginPath();
      // this.canvasContext.arc(100, 100, 60, Math.PI * 1.5, Math.PI * 2, false);
      // this.canvasContext.strokeStyle = "green";
      // this.canvasContext.lineWidth = 40;
      // this.canvasContext.stroke();
      // this.canvasContext.closePath();
      // this.canvasContext.fillStyle = "rgb(255,255,255)";
      // this.canvasContext.fill();
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  destroyed() {}
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/scss/common";
.Canvas_page {
  width: 100%;
  .title {
    width: 100%;
    height: 44px;
    border-bottom: 1px solid #dbdbdb;
    @include flx-dsp($drt: row, $jsc: center, $ali: center);
    .left,
    .right {
      width: 14%;
      height: 100%;
      font-size: 20px;
      font-weight: 700;
      @include flx-dsp($drt: row, $jsc: center, $ali: center);
    }
    .center {
      width: 72%;
      height: 100%;
      @include flx-dsp($drt: row, $jsc: center, $ali: center);
    }
  }
  .canvas_box {
    width: 100%;
    height: 40vh;
    border: 1px solid #333;
    box-sizing: border-box;
    background-color: antiquewhite;
    position: relative;
    #canvas {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      // background-color: yellow;
      border: 5px solid #333;
      box-sizing: border-box;
    }
  }
}
</style>